<template>
	<view class="content" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
		<div style="position:fixed;right: 0.5em;bottom: 3em;width: 40%;z-index: 100;">
			<image src="https://xdsbz.com:802/prod-api/profile/upload/my/qlkj/zhibao.png" style="width: 100%;"
				mode="widthFix"></image>
		</div>
		<u-image width="100%" :height="300"
			src="https://xdsbz.com:802/prod-api/profile/upload/my/1.jpg"></u-image>

		<div style="margin-top: 0.9em;">
			<div :class="{'tabbts':index!=currentNum,'tabbtsCurrent':index==currentNum}" v-for="(item,index) in objs"
				@click="tabbtClick(index)" :key="index">{{ index + 1 }}</div>
			<div class="clear"></div>
		</div>

		<div v-for="(item,index) in objs" :key="index">
			<div v-if="currentNum==index">
				<u-form :model="item" ref="uForm">
					<u-form-item label="产品类型" label-width="200rpx" left-icon=""><u-input disabled
							v-model="item.name" /></u-form-item>
					<u-form-item label="产品品牌" label-width="200rpx" left-icon=""><u-input disabled
							v-model="item.quCaBrandName" /></u-form-item>
					<u-form-item label="质保编号" label-width="200rpx" left-icon=""><u-input disabled
							v-model="item.quQualityNum" /></u-form-item>
					<u-form-item label="车主姓名" label-width="200rpx" left-icon=""><u-input disabled
							v-model="item.quName" /></u-form-item>
					<u-form-item label="车主电话" label-width="200rpx" left-icon=""><u-input disabled
							v-model="item.quPhone" /></u-form-item>
					<u-form-item label="车型" label-width="200rpx" left-icon=""><u-input disabled
							v-model="item.quModel" /></u-form-item>
					<u-form-item label="车牌号码" label-width="200rpx" left-icon=""><u-input disabled
							v-model="item.quLicencePlate" /></u-form-item>
					<u-form-item label="车架号码" label-width="200rpx" left-icon=""><u-input disabled
							v-model="item.quVin" /></u-form-item>
					<u-form-item label="施工部位" label-width="200rpx" left-icon=""><u-input disabled
							v-model="item.quBuildDept" /></u-form-item>
					<u-form-item label="施工店名" label-width="200rpx" left-icon=""><u-input disabled
							v-model="item.quShopName" /></u-form-item>
					<u-form-item label="施工颜色" v-if="form.LxType == '101'" label-width="200rpx" left-icon=""><u-input
							disabled v-model="item.quBuildColor" /></u-form-item>
					<u-form-item label="施工时间" label-width="200rpx" left-icon=""><u-input disabled
							v-model="item.quBuildTime" /></u-form-item>
					<u-form-item label="质保年限" label-width="200rpx" left-icon=""><u-input disabled
							v-model="item.quAgeLimit" /></u-form-item>
					<u-form-item label="产品型号" label-width="200rpx" left-icon=""><u-input disabled
							v-model="item.prModel" /></u-form-item>
					<u-form-item label="贴车价格" label-width="200rpx" left-icon=""><u-input disabled
							v-model="item.quPasteMoney" /></u-form-item>
					<u-form-item label="膜筒序列号" label-width="200rpx" left-icon=""><u-input disabled
							v-model="item.quFilmNum" /></u-form-item>

					<u-form-item label="前挡质保编号" v-if="form.LxType == '102'" label-width="200rpx" left-icon=""><u-input
							disabled v-model="item.quFrontNum" /></u-form-item>
					<u-form-item label="前挡膜筒序列号" v-if="form.LxType == '102'" label-width="200rpx" left-icon=""><u-input
							disabled v-model="item.quFrontFilm" /></u-form-item>

					<u-form-item label="侧后档质保编号" v-if="item.LxType == '102'" label-width="200rpx" left-icon=""><u-input
							disabled v-model="item.quSideNum" /></u-form-item>
					<u-form-item label="侧后档膜筒序列号" v-if="item.LxType == '102'" label-width="200rpx" left-icon=""><u-input
							disabled v-model="item.quSideFilm" /></u-form-item>

					<u-form-item label="施工照片" label-width="200rpx" left-icon="" :border-bottom="false"></u-form-item>
					<view class="" v-for="(item2,index2) in item.fileList" :key="index2">
						<u-image :src="item2.url" style="width: 100%;" mode="widthFix"></u-image>
					</view>
				</u-form>
			</div>
		</div>

	</view>
</template>

<script>
	import {
		url
	} from '@/common/index.js'
	import {
		getBg
	} from "@/common/api.js"
	export default {
		data() {
			return {
				startX: 0,
				currentNum: 0,
				src: "",
				action: url,
				form: {
					LxType: 0
				},
				objs: [],
				fileList: []
			}
		},
		onLoad(data) {
			this.getBg()
			this.objs = JSON.parse(data.item);

			for (var i = 0; i < this.objs.length; i++) {
				Object.assign(this.objs[i], {
					"LxType": this.objs[i].quTypeId,
					"fileList": []
				})
			}

			for (var i = 0; i < this.objs.length; i++) {
				this.objs[i].quPic.split(',').forEach(item => {
					this.objs[i].fileList.push({
						name: item,
						url: url + item,
					})
				})
				
			}
			console.log('newobjs',this.objs);

			// this.form = JSON.parse(data.item)
			// this.form.LxType = this.form.quTypeId
			// this.form.name = this.form.quTypeId == 100 ? "漆面膜" : this.form.quTypeId == 101 ? "改色膜" : "太阳膜"
			// this.form.quPic.split(',').forEach(item => {
			// 	this.fileList.push({
			// 		name: item,
			// 		url: url + item,
			// 	})
			// })
			// console.log(this.form)

		},
		methods: {
			handleTouchStart(event) {
				this.startX = event.touches[0].clientX;
			},
			handleTouchEnd(event) {
				const endX = event.changedTouches[0].clientX;
				const threshold = 30; // 阈值可以根据需要调整

				if (endX - this.startX > threshold) {
					// 右划事件
					// console.log('右划事件')
					if (this.currentNum < this.objs.length - 1) {
						this.currentNum++;
					}
				} else if (this.startX - endX > threshold) {
					// 左划事件
					// console.log('左划事件')
					if (this.currentNum > 0) {
						this.currentNum--;
					}
				}
			},
			tabbtClick(num) {
				this.currentNum = num;
			},
			// 查询背景图
			async getBg() {
				let data = await getBg(118)
				this.src = url + data.rows[0].baUrl
			},
			perImage(url) {
				uni.previewImage({
					urls: [
						url
					],
					success: res => {
						console.log(res);
					}
				})
			},
		}
	}
</script>

<style scoped>
	.tabbtsCurrent {
		background-color: red;
		border-radius: 50%;
		height: 2.0em;
		line-height: 2.0em;
		width: 2.0em;
		color: #fff;
		text-align: center;
		float: left;
		margin-right: 0.8em;
	}

	.tabbts {
		background-color: #fff;
		border-radius: 50%;
		height: 2.0em;
		line-height: 2.0em;
		width: 2.0em;
		color: #848484;
		text-align: center;
		float: left;
		margin-right: 0.8em;
	}

	.clear {
		clear: both;
	}

	page {
		background-color: #222;
	}

	.content {
		padding: 30rpx;
	}

	/deep/.uni-input-wrapper {
		color: #fff;
	}

	/deep/.u-form-item--left__content {
		color: #fff;
	}
</style>